<template>
  <div class="like_container">
    <h1>相关产品</h1>
    <div class="like_msg">Related Product</div>
    <div class="content">
      <ul>
        <li v-for="index of 5" :key="index" class="item_b">
          <div class="like_img">
            <div class="item_img">
              <img src="https://i.postimg.cc/dVwT69wc/DM-20220511173201-005.jpg" alt="" />
            </div>
          </div>
          <div class="item_details">
            <!-- <div class="itenm_tag">鞋子</div> -->
            <div class="item_title">Nike 空军一号</div>
            <div class="item_price">￥88.00</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "LikeDetails",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  width: 100%;
}
.like_container {
  margin-top: 100px;
  h1 {
    text-align: center;
    font-size: 30px;
  }
  .like_msg {
    margin-top: 15px;
    font-size: 24px;
    text-align: center;
  }
  .content {
    margin-top: 30px;
    ul {
      display: flex;
      justify-content: space-between;
      .item_b {
        transition: all 0.5s linear;
        box-sizing: content-box;
        padding: 3px;
        width: 220px;
        border: 2px solid #ccc;
        border-radius: 5px;
        .like_img {
          .item_img {
            width: 220px;
            line-height: 0;
            overflow: hidden;
            img {
              transition: all 0.5s linear;
            }
          }
          &:hover {
            .item_img{
                img{
                    transform: scale(1.1);
                }
            }
          }
        }
        .item_details{
              .item_title{
                  margin: 10px 0;
                  font-size: 18px;
                  font-weight: 700;
                  color: #474747;
              }
              .item_price{
                  margin: 10px 0;
                  font-weight: 600;
                  color: #666666;
              }
          }
        &:hover{
            transform: scaleY(1.1);
        }
      }
    }
  }
}
</style>